<style lang="scss" scoped>
  .listItem{
  	padding: 0.8rem;
  	border: 1px solid #0F91BE;
  	position: relative;
	margin-bottom: 1.2rem;
	background-color: rgba($color: #015d7d, $alpha: 0.4);
  	.tag{
  		color: #ffffff;
  		background: rgba(0, 195, 248, 0.2);
  		border-radius: 4px;
  		padding: 3px 5px;
		// margin-left: -4px;
  	}
	.status{
		color: #ffffff;
		background: rgba(85, 170, 255, 0.6);
		border-radius: 4px;
		padding: 5px 5px;
		// margin-left: -4px;
	}
  	.timeTag{
  		padding: 4px;
  		border-radius: 4px;
		min-width: 66px;
		text-align: center;
		margin-right: -4px;
		&.ing{
			background: linear-gradient(to right, #FC9600,#dfb920);
		}
		&.end{
			background:linear-gradient(to right, #b6b6b6,#d0d0d0);
		}
  	}
  	.line1{
  		position: absolute;
  		width: 18px;
  		height: 2px;
  		background-color: #55ffff;
  	}
  	.line2{
  		position: absolute;
  		width: 2px;
  		height: 4px;
  		background-color: #55ffff;
  	}
  	.top_left{
  		left: 0;
  		top: 0;
  	}
  	.top_right{
  		right: 0;
  		top: 0;
  	}
  	.bottom_left{
  		left: 0;
  		bottom: 0;
  	}
  	.bottom_right{
  		right: 0;
  		bottom: 0;
  	}
  }
</style>
<template>
  <div class="listItem" @click="toDetailView(item)">
  	<div class="flex align-center">
		<div class="line-h-s ellipsis-line2 text-justify" :style="{fontSize:fontSize==1?'15px':'18px'}">{{item.title}}</div>
	</div>
	<div class="flex align-center mar-t-3" v-if="item.apply_status_remark">
		<div class="status fs-12">{{item.apply_status_str=='申请驳回'?'申请失败':item.apply_status_str}}: {{item.apply_status_remark}}</div>
	</div>
  	<div class="mar-t-2 over-hid">
  		<div class="f-left" v-if="item.policy_keywords">
  			<template v-for="(it,index) in item.policy_keywords.split(',')">
  				<span class="tag f-left mar-r-3 mar-t-3" v-if="index<2" :style="{fontSize:fontSize==1?'13px':'15px'}">
					<template>
						{{it.length>5?it.substr(0,5)+'...':it}}
					</template>
				</span>
  			</template>
  		</div>
		<div class="timeTag fs-13 text-mini-m f-right ing" style="flex: 0 0 110px;" v-if="item.end_time>=$utils.parseToDateYMD2(new Date())">{{item.end_time}}截止</div>
		<div class="timeTag fs-13 text-mini-m f-right end" v-else style="flex: 0 0 110px;">已结束</div>
  	</div>
  	<div class="flex align-center justify-between mar-t-10" :style="{fontSize:fontSize==1?'13px':'16px'}">
  		<div class="">{{item.units_name}}</div>
  		<div class="">发布时间：{{item.created_at.substr(0,10)}}</div>
  	</div>
  	<div class="top_left line1"></div>
  	<div class="top_right line1"></div>
  	<div class="bottom_right line1"></div>
  	<div class="bottom_left line1"></div>
  	<div class="top_left line2"></div>
  	<div class="top_right line2"></div>
  	<div class="bottom_right line2"></div>
  	<div class="bottom_left line2"></div>
  </div>
</template>
<script>
	import {Dialog} from 'vant'
export default {
  components: {
  },
  props: {
    item: {
      type:Object,
      default(){
      	return {}
      }
    },
  },
  data() {
    return {
      value: '',
	  fontSize:localStorage.getItem('fontSize') || 1
    };
  },
  mounted() {
    // const navbarHeight = this.$refs.navbar.offsetHeight
    // console.log('navbarHeight',navbarHeight)
    // this.$store.commit('setNavbarHeight',navbarHeight)
  },
  methods: {
    toDetailView(item) {
	  if(item.end_time<=this.$utils.parseToDateYMD2(new Date())){
		  Dialog({ title:'温馨提示', message: '该政策已结束', closeOnClickOverlay:true }).then(res=>{
			  const path = location.href.split('#')[1]
			  localStorage.setItem('lastPage',path)
			  this.$router.push(`/index/detail?id=${item.id}`)
		  });
		  // return
	  }else{
		  const path = location.href.split('#')[1]
		  localStorage.setItem('lastPage',path)
		  this.$router.push(`/index/detail?id=${item.id}`)
	  }
	  
    },
    onClickRight() {
      this.$router.push('/workbench')
    },
  },
};
</script>
